<template>
  <div style="display: flex">
    <div class="left">
      <div class="part1">
        <p :class="{ active: activeType === '' }"
           @click="handleClick('')"
        >
          <span style="font-size:16px;font-weight: bold">{{ StaticCount.allCount }}</span>
          <span style="color: #919398">全部</span>
        </p>
        <p :class="{ active: activeType === '0' }"
           @click="handleClick('0')">
          <span style="font-size:16px;font-weight: bold">{{ StaticCount.notStartCount }}</span>
          <span style="color: #919398">未开始</span>
        </p>
        <p :class="{ active: activeType === '1' }"
           @click="handleClick('1')">
          <span style="font-size:16px;font-weight: bold">{{ StaticCount.doingCount }}</span>
          <span style="color: #919398">进行中</span>
        </p>
        <p :class="{ active: activeType === '2' }"
           @click="handleClick('2')">
          <span style="font-size:16px;font-weight: bold">{{ StaticCount.doneCount }}</span>
          <span style="color: #919398">已完成</span>
        </p>
      </div>
      <div>
        <el-input style="margin-top: 10px" placeholder="请输入计划名称" size="small" suffix-icon="el-icon-search"
                  v-model="autoPatrolConfigName" @input="getStatics"></el-input>
      </div>
      <div class="part2">
        <div class="pics" style="position: relative" v-for="(item,index) in staticList"
             :key="index"
             :class="{ active: activePics === index }"
             @click="getChartTable(item,index)"
        >
          <p>
            <el-image src="https://qiniushelves.jiachuangnet.com/renovation/img/V804270下载.png"
                      style="width: 20px;margin-right: 10px"></el-image>
            <span style="color: #919398">模板 | {{ item.patrolTemplateName }}</span>
          </p>
          <p style="margin-top: 40px">
            {{ item.autoPatrolConfigName }}
          </p>
          <p style="margin-top: 5px;font-size: 12px;color: #919398">
            创建人：{{ item.createUserName }}
          </p>
          <span
              v-if="item.state==0"
              style="width: 50px;height: 20px;font-size: 12px;
              text-align: center;background-color:#eee;border-radius: 5px;
      position: absolute;right: 10px;color: #333">未开始</span>
          <span
              v-if="item.state==1"
              style="width: 50px;height: 20px;font-size: 12px;
              text-align: center;background-color:#a4da89;border-radius: 5px;
      position: absolute;right: 10px;color: #333">进行中</span> <span
            v-if="item.state==2"
            style="width: 50px;height: 20px;font-size: 12px;
              text-align: center;background-color:#e6a23c;border-radius: 5px;
      position: absolute;right: 10px;color: #eee">已完成</span>
        </div>

      </div>


    </div>
    <div class="center" style="width: 10px;height: calc(100vh - 120px);background-color:#eee;margin-left:20px"></div>
    <div class="right" style="" v-loading="loading">
      <div class="top" style="margin-left: 20px">
        <div class="main">
          <echart :echartsData="afterSalePie" v-if="afterSalePie" style="height: 100%;"></echart>
          <div style="margin-top: 15px">
            <p>
              <span style="display: flex;align-items: center"><a style="background-color:#67c23a"></a>未开始</span>
              <span style="font-weight: bold">{{ percent.notDonePercent }}%</span>
            </p>
            <p>
              <span style="display: flex;align-items: center"><a style="background-color:#ff6a00"></a>已完成</span>
              <span style="font-weight: bold">{{ percent.donePercent }}%</span>
            </p>
            <p>
              <span style="display: flex;align-items: center"><a style="background-color:red"></a>已逾期</span>
              <span style="font-weight: bold">{{ percent.overduePercent }}%</span>
            </p>
          </div>
        </div>
        <div class="area2">
          <p>
            <span style="font-size: 18px;color: #606266">全部</span>
            <span style="font-size: 13px;color: #6788FF">{{ percent.allCount }}</span>
          </p>
          <p>
            <span style="font-size: 18px;color: #606266">未开始</span>
            <span style="font-size: 13px;color: #67c23a">{{ percent.notDoneCount }}</span>
          </p>
          <p>
            <span style="font-size: 18px;color: #606266">已完成</span>
            <span style="font-size: 13px;color: #ff6a00">{{ percent.doneCount }}</span>
          </p>
          <p>
            <span style="font-size: 18px;color: #606266">已逾期</span>
            <span style="font-size: 13px;color: red">{{ percent.overdueCount }}</span>
          </p>

        </div>
        <div class="area3">
          <p>
            <span>任务类型</span>
            <span>巡查</span>
          </p>
          <p>
            <span>巡查模板</span>
            <span>{{ storeInfo.patrolTemplateName }}</span>
          </p>
          <p>
            <span>循环方式</span>
            <span>单个任务</span>
          </p>
          <p>
            <span>巡查人</span>
            <span>{{ storeInfo.patrolPersonName }}</span>
          </p>
          <p>
            <span>计划有效期</span>
            <span>{{ (storeInfo.startTime || '') + '-' + (storeInfo.endTime || '') }}</span>
          </p>
        </div>

      </div>
      <div class="line" style="width: 100%;height: 10px;background-color:#eee;"></div>
      <div class="bottom" style="margin-left: 20px;padding-top: 10px">
        <p style="font-weight: bold">门店执行情况</p>
        <el-table :data="tableData" :cell-style="{ 'textAlign': 'center'}"
                  :header-cell-style="{'color': '#999', 'textAlign': 'center','fontSize': '13px', }"
                  style="margin-top: 10px;height: 300px;overflow-y: auto;">
          <el-table-column prop="assignTaskName" label="门店名称" fixed></el-table-column>
          <el-table-column prop="taskExecutionRate" label="任务执行率"></el-table-column>
          <el-table-column prop="taskGenerationNumber" label="任务生成数"></el-table-column>
          <el-table-column prop="taskCompletionNumber" label="已完成"></el-table-column>
          <el-table-column prop="taskPendingExecution" label="待执行"></el-table-column>
          <el-table-column prop="taskTimeout" label="过期未执行"></el-table-column>
          <el-table-column prop="needAssessmentTimes" label="需要考评次数"></el-table-column>
          <el-table-column prop="assessmentNeedRectification" label="考评需要整改"></el-table-column>
          <el-table-column prop="rectificationCompletionTimes" label="整改完成次数"></el-table-column>
          <el-table-column prop="assessmentRectificationRate" label="考评整改率"></el-table-column>
          <el-table-column prop="unqualifiedProblemNumber" label="不合格问题数"></el-table-column>
        </el-table>
        <!--        <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeMessage"-->
        <!--                       @current-change="handleCurrentMessage" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"-->
        <!--                       layout="total, sizes, prev, pager, next, jumper" :total="messageTotal">-->
        <!--        </el-pagination>-->
      </div>


    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts';
import echart from "@/RayComponents/echart.vue";

export default {
  name: "planStatistics",
  components: {
    echart,
  },
  data() {
    return {
      tableData: [],
      StaticCount: {},
      storeInfo: {},
      activeType: "",
      percent: {},
      autoPatrolConfigName: "",
      staticList: [],
      currentPage: 1,
      messageTotal: 0,
      activeIndex: 0,
      activePics: 0,
      stateIndex: 0,
      afterSalePie: null,
      loading: false,
      stateList: [],
    }
  },
  created() {
    Promise.all([
      this.getCount(),
      this.getStatics()
    ]).then(() => {
    });
  },
  methods: {
    getChartTable(item, index) {
      this.loading = true
      this.storeInfo = item
      this.activePics = index
      this.$api.inspectionTaskGetAutoPlanDetailStatistics({autoPatrolConfigId: (item.autoPatrolConfigId || item)}).then(res => {
        this.tableData = res
      })
      this.$api.inspectionTaskGetAutoPlanDetailStatisticsCount({autoPatrolConfigId: (item.autoPatrolConfigId || item)}).then(res => {
      })
      this.getSaleAfter(item.autoPatrolConfigId)
    },
    getStatics() {
      this.$api.inspectionTaskGetAutoPlanStatistics({
        autoPatrolConfigName: this.autoPatrolConfigName,
        state: this.activeType
      }).then(res => {
        this.staticList = res
        this.autoPatrolConfigId = this.staticList[0].autoPatrolConfigId
        this.getChartTable(this.autoPatrolConfigId, 0)
      })
    },
    handleClick(type) {
      this.activeType = type;
      this.getStatics()
    },
    getCount() {
      this.$api.inspectionTaskGetAutoPlanStatisticsCount().then(res => {
        this.StaticCount = res
      })
    },
    handleSizeMessage() {
    },
    handleCurrentMessage() {
    },
    async getSaleAfter(id) {
      this.afterSalePie = null
      const data = await this.$api.inspectionTaskGetAutoPlanDetailStatisticsCount({autoPatrolConfigId: id || this.autoPatrolConfigId})
      console.log(data, "data")
      this.percent = data
      const res = {
        afterSaleRatio: [
          parseFloat(data.notDonePercent),
          parseFloat(data.donePercent),
          parseFloat(data.overduePercent)
        ],
        afterSaleType: ['未开始', '已完成', '已逾期']
      };
      let jsonArr = [];
      var keyArr = res.afterSaleType;
      var valueArr = res.afterSaleRatio;
      for (var i = 0; i < keyArr.length; i++) {
        var json = {};
        for (var j = 0; j < valueArr.length; j++) {
          if (i == j) {
            json.value = valueArr[j];
            json.name = keyArr[i];
            jsonArr.push(json);
          }
        }
      }
      this.jsonArr = jsonArr
      this.afterSalePie = {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   right: 20,
        //   top: 'middle',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['45%', '55%'],
            center: ['40%', '50%'], // 给图例留空间
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{d}%',
              fontSize: 13,
              color: '#333'
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 10
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: jsonArr
          }
        ]
      };
      this.loading = false
    },
  }
}
</script>

<style scoped lang="less">

.left {
  width: 20%;
  height: calc(100vh - 120px);
  overflow-y: auto;

  .part1 {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #eee;

    p {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 5px;
    }

    p.active {
      border-bottom: 3px solid #ff6a00;
    }

    span {
      display: block;
    }
  }
}

.area3 {
  margin-left: 20px;
  border-left: 1px solid #eeeeee;
  padding-left: 15px;
  box-sizing: border-box;

  p {
    margin-bottom: 10px;
    display: flex;
    font-size: 13px;

    span {
      display: block;
    }

    span:first-child {
      color: #919398;
      width: 100px;
    }
  }
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.area2 {
  display: flex;

  p {
    width: 150px;
    height: 50px;
    background-color: #eee;
    margin-left: 15px;
    text-align: center;
    font-weight: bold;

    span {
      display: block;
    }
  }

  p.active {
    color: #ff6a00;
  }
}

.main {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: center;

  a {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    display: block
  }

  p {
    width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      display: block;

    }
  }
}

.pics {
  width: 100%;
  margin-top: 15px;
  height: 150px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;

  p {
    display: flex;

    span {
      display: block;
    }
  }
}

.pics.active {
  border: 1px solid #ff6a00;
}
</style>